<template>
  <div class="user">
    <PageSearch
      :pageSearchConfig="pageSearchConfig"
      @reset="handleReset"
      @search="handleSearch"
    ></PageSearch>
    <PageContent
      class="pageContent"
      :pageContentConfig="refPageContentConfig"
      ref="pageContentRef"
      @createData="handleNewData"
      @edit="handleEdit"
      @changePropListShow="changePropListShow"
    ></PageContent>
    <PageModal
      ref="pageModalRef"
      :pageModalConfig="pageModalConfig"
      :defaultInfo="defaultInfo"
    ></PageModal>
  </div>
</template>

<script setup lang="ts">
import useMainStore from '../../../../stores/main/main'
import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'
import { pageSearchConfig } from './config/search'
import { pageContentConfig } from './config/content'
import { pageModalConfig } from './config/modal'
import { usePageSearch } from '@/hooks/usePageSearch'
import { usePageModal } from '@/hooks/usePageModal'
import { usePageContent } from '@/hooks/usePageContent'

//为什么放在这里来呢因为是搜索部分调用了content部分的方法
const [pageContentRef, handleReset, handleSearch] = usePageSearch()

// const pageContentRef = ref();
// const handleReset = () => {
//   pageContentRef.value.getPageData();
// };
// const handleSearch = (e) => {
//   pageContentRef.value.getPageData({ ...e });
// };

// const defaultInfo = ref({});
// const pageModalRef = ref();
// const changeDialogVisible = () => {
//   pageModalRef.value.dialogVisible = true;
//   defaultInfo.value = {};
// };
// const handleEdit = (obj) => {
//   pageModalRef.value.dialogVisible = true;
//   defaultInfo.value = obj;
// };

// 响应式数据,方便子组件根据这个值的改变响应
const [refPageContentConfig, changePropListShow] =
  usePageContent(pageContentConfig)

// 改造一下modal里面的部门和角色数据
const MainStore = useMainStore()

const departmentObj: any = pageModalConfig.formItems.find(
  (item) => item.fileId === 'departmentId'
)
departmentObj.options = MainStore.departmentData.map((item: any) => {
  return {
    label: item.name,
    value: item.id
  }
})
const roleObj: any = pageModalConfig.formItems.find(
  (item) => item.fileId === 'roleId'
)
roleObj.options = MainStore.roleData.map((item: any) => {
  return {
    label: item.name,
    value: item.id
  }
})

// 对是否隐藏密码框的cb
const newHandleCallback = () => {
  const passwordItem = pageModalConfig.formItems?.find(
    (item: any) => item.fileId === 'password'
  )
  passwordItem!.isHide = false
}
const editHandleCallback = () => {
  const passwordItem = pageModalConfig.formItems?.find(
    (item: any) => item.fileId === 'password'
  )
  passwordItem!.isHide = true
}
// 新增数据的弹窗的显示,编辑数据的弹窗显示
const [pageModalRef, defaultInfo, handleNewData, handleEdit] = usePageModal(
  newHandleCallback,
  editHandleCallback
)
</script>

<style lang="less" scoped>
.user {
  .table {
    margin-top: 20px;
  }
  .pageContent {
    margin-top: 50px;
  }
}
</style>
